<template>
	<view>
		<heardData @changeAvat="changeAvat"></heardData>
		<view class="content">
			<view class="heard_user">
				<img src="../../static/fengjing.jpg" v-if="avatflag==0" alt="">
				<img :src="userInfo.avatarUrl" v-else alt="">
				<view class="title">{{title}}</view>
			</view>
			<view class="menu">
				<template v-for="(item, index) in menuList">
					<!-- <view v-if="item.status == '1'" class="menu_card" @click="goNavData(item,index)">{{item.name}}</view> -->
					<view class="menu_card" @click="goNavData(item,index)">{{item.name}}</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import heardData from "../../component/heard.vue" //组件引入
	import menuJson from '../../static/data/menu.json'
    export default {
		components: { heardData },
		data () {
			return {
				userInfo: {},
				menuList: [],
				avatflag: uni.getStorageSync('avatflag'),
				title: ''
			}
		},
		created () {
			if (uni.getStorageSync('profile')) {
				this.userInfo = uni.getStorageSync('profile')
			}
			this.getMenuData()
			this.showMessage()
		},
        methods: {
			getMenuData () {
				this.$request('mobile/getUserMenuList', 'post', {yhsj: uni.getStorageSync('mobile')}).then(res => {
					let data = menuJson
					data.forEach(item => {
						for (let key in res.data) {
							if (item.code == key) {
								item.status = res.data[key]
							}
						}
					})
					this.menuList = data
				})
			},
			goNavData (item, index) {
				uni.setStorageSync('current', index)
				uni.navigateTo({
				    url: item.url
				});
			},
			changeAvat(){
				this.avatflag = uni.getStorageSync('avatflag')
			},
			showMessage() {
			    var time = new Date().getHours();
			    if (time < 12) {
					this.title = '新的一天，新的开始，充满希望与梦想。'
			    } else if (time >= 12 && time < 18) {
			        console.log("下午的语录：");
					this.title = '小主人，生活中的每一天都是一个新的开始。'
			    } else {
					this.title = '小主人，人生就像一杯茶，只有慢慢品味其味道。'
			    }
			}
        }
    }
</script>

<style lang="scss">
.heard_user {
	margin: 20rpx; padding: 30rpx; border-radius: 20rpx;
	background: #fff;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	img {
		width: 150rpx; height: 150rpx; border-radius: 100rpx;
	}
	.title {
		padding-top: 10rpx; color: #303133;
	}
}
.menu {
	.menu_card {
		width: calc(50% - 40rpx); display: inline-flex; background-color: #fff; color: #303133;
		margin: 20rpx; justify-content: center; height: 150rpx; line-height: 150rpx; font-size: 30rpx;
		border-radius: 20rpx;
	}
}
</style>